<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
			
			请实现问题4.gif的效果
			注意:
			1.鼠标移上去火箭时会变化
			2.火箭与滚动条同时到顶(动画时间为1s),并且动画完成后,火箭会回到原位
			3.火箭升空时,有动画切换以求达到真实感觉
			4.请使用img/rocket_button_up.png进行火箭切换
		-->

		<!--
			1.如何获取滚动条的高度  scrollTop
			2.如何获取火箭的高度offsetTop
			3.火箭的动画的切换
			4.滚动条移动到最顶端
			5.火箭移动到最顶端
			6.同时到达最顶端
		-->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.web {
				height: 10000px;
				background: linear-gradient(#fff, #000);
			}
			
			.rocket {
				width: 149px;
				height: 249px;
				background: url(rocket_button_up.png) 0% top;
				position: fixed;
				top: 60%;
				right: 20px;
				opacity: 0;				
			}
			.rocket_run{
				animation: rocket_run .25s infinite alternate steps(4);
			}
			.rocket:hover {
				background-position: -100% 0%;
			}
			
			@keyframes rocket_run {
				0% {
					background-position: -200% 0%;
				}
				100% {
					background-position: -600% 0%;
				}
			}
		</style>
		
		<div class="web">
			<div class="rocket">

			</div>
		</div>
		
		<script type="text/javascript">
			var rocket = document.querySelector(".rocket"),
			body_top,
			rocket_top,
			body_speed,
			rocket_speed,
			timer,
			shenyu_8 = 0,
			bool = false,
			kaiguan = true;
			
			
			window.addEventListener("scroll",function(){
				if(scroll().top>200){
					animate(rocket,{"opacity":100});
				}
				else{
					if(bool){
						animate(rocket,{"opacity":100},function(){
							bool = false;
						});
					}
					else{
						animate(rocket,{"opacity":0});
					}
				}
			})
			
			
			rocket.addEventListener("click",function(){
				if(kaiguan){
					kaiguan = false;
					body_top = scroll().top;
					shenyu_8 = scroll().top*0.08;
					rocket_top = rocket.offsetTop;
					body_speed = body_top/50;
					rocket_speed = rocket_top/50;
					this.classList.add("rocket_run");
					clearInterval(timer);
					timer = setInterval(function(){
						body_top -= body_speed;
						rocket_top -= rocket_speed;
						document.body.scrollTop = body_top;
						rocket.style.top = rocket_top + "px";
						if(body_top<shenyu_8){
							body_speed = shenyu_8/4;
						}
						if(body_top<=0){
							clearInterval(timer);
							rocket.classList.remove("rocket_run");
							rocket.style.top = "";
							console.log(1);
							bool = true;
							kaiguan = true;
						}
					},20)
				}
								
			})
			
			
			//缓动动画封装
			//对传入的json做以下处理
			//对opactiy进行百进制处理，防止精度丢失
			//对z-index建议使用驼峰处理
			function animate(ele,json,fn){
				//要用定时器，先清定时器
				clearInterval(ele.timer);
				ele.timer = setInterval(function(){
					//开闭原则,用于清除定时器(修复bug)
					var bool = true;
					//获取初始位置,通过getComputedStyle()获取行外样式
					for(var k in json){
						//设置初始位置
						var leader;
						//对opacity的处理
						if(k == "opacity"){
							leader = getStyle(ele,k)*100 || 1;
						}
						//正常处理
						else{
							leader = parseInt(getStyle(ele,k)) || 0;
						}
						//生成一个步长
						var step = (json[k] - leader) / 10;
						//处理步长，步长为正向上取整，为负向下取整
						step = step>0?Math.ceil(step):Math.floor(step);
						//开始出发，初始位置加上步长
						leader += step;
						//开始赋值						
						if(k == "opacity"){
							//特殊情况特殊赋值
							ele.style[k] = leader/100;
							//兼容ie
							ele.style.filter = "alpha(opacity="+leader+")";
						}
						//层级只需直接赋值
						else if(k == "zIndex"){
							ele.style[k] = json[k];
						}
						else{
							ele.style[k] = leader + "px";
						}
						
						//如果json里面有任意一个键值对的值没有对应leader，bool不能为true
						if(json[k] !== leader){
							bool = false;
						}
					}
					//清除定时器
					if(bool){
						clearInterval(ele.timer);
						//回调
						if(fn){
							fn();
						}
					}
				},25);
			}
			
			//封装一个获取行外样式的方法
			function getStyle(ele,attr){
				if(window.getComputedStyle){
					//w3c标准
					return window.getComputedStyle(ele,null)[attr];
				}
				//兼容ie
				return ele.currentStyle[attr];
			}
			
			function scroll() {
				return {
					"top": window.pageYoffset || document.body.scrollTop || document.documentElement.scrollTop,
					"left": window.pageXoffset || document.body.scrollLeft || document.documentElement.scrollLeft
				}
			}
		</script>
	</body>

</html>